<template>
    
    <div id="app">
      
      <shopHeader :pageType = pageOne ></shopHeader>
    
      <!-- 内容 -->
      <div class="container">
        <div class="menu">
          <ul class="menulist">   
            <li class="active mreco"  v-for="good in goods" :key="good.type"> 
              <div class="specail"><span class="mimg"></span>{{good.name}}</div>
            </li>
            
          </ul>
          <div class="goodslist">
              <dl class="menugoods"  v-for="(good,index) in goods" :key="index">
                <dt>{{good.name}}</dt>
                <dd class="menudetail" v-for="(food,index) in good.foods" :key="index">
                  <img :src="food.image" alt="">
                  <div class="mgoods">
                    <div class="goodstitle">{{food.name}}</div>
                    <div class="metaste">{{food.description}}</div>
                    <div class="mcomment">
                      <div class="sale">月售{{food.sellCount}}份</div>
                      <div class="goodcomment">好评率{{food.rating}}%</div>
                    </div>
                    <div class="mdfoot">
                      <div class="price">
                        <div class="mdprice">
                        <span>￥</span>{{food.price}}
                        </div>
                        <div class="mdcost" v-if="food.oldPrice"><span>￥</span>{{food.oldPrice}}</div> 
                      </div>
                    </div> 
                    <div class="mdnum">
                        <span class="layout-remove_circle_outline desc"></span>
                        <span class="count">1</span>
                        <span class="layout-add_circle add"></span>
                      </div>
                  </div>
                </dd>
           </dl>
          </div>
        </div>
      </div>  

      <shopCart></shopCart>
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  name: "goods",
  data() {
      return {
          pageOne : 1,
      }
  },
  computed: {
    ...mapState(['goods'])
  },
  methods: {
    ...mapActions(["getGoods"])
  },
  async mounted(){
    await this.getGoods()
  }
};
</script>

<style scoped>
  #app{
    position: relative;
    width: 100vw;
    height: 100vh;
  }
  
  .notice{
          display: flex;
          align-items: center;
          padding:0 24rem;
          height: 56rem;
          background-color:rgba(7, 17, 27, 0.2);
  }
  .notice .nimg{
          width: 45rem;
          height: 25rem;
          margin-right: 12rem;
          background: url(/images/bulletin@3x.png) no-repeat;
          background-size: cover;
  }
  .notice .ndetail{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 20rem;
          color:rgb(255, 255,255);
          font-weight: 200;
          line-height:56rem;
  }
  
  .container .contop{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 80rem;
    font-size:28rem;
    line-height:28rem;
    background-color: #fff;
    color:rgb(77,85,93);
    border-bottom: 1rem solid rgb(7,17,27,0.1);
  }
  .container .contop .active{
    color:rgb(240,20,20);
  }
  .menu{
    display: flex;
  }
  .menu .menulist{
    text-align:center;
    width: 160rem;
   
    background-color: #f3f5f7;
  }
   .menulist li{
    display:flex;
    position:relative;
    justify-content:center;
    align-items:center;
    width: 112rem;
    padding: 0 24rem;
    font-size: 24rem;
    color:#07111b;
    height: 108rem;
    font-weight: 200;
    line-height: 28rem;
    border-bottom: 1px solid rgb(7,17,27,0.1);
  }
  .menulist li.active{
    width: 112rem;
    background-color:#fff;
  }
  .mreco .mimg{
    position:absolute;
    left:24rem;
    top:27rem;
    width: 25rem;
    height: 25rem;
    background:url(/images/special_4@3x.png);
    background-size: cover;
  }
  .mreco .specail{
    margin-left: 25rem;
  }
  .menu .menugoods{
    width: 100%;
  }
  .menugoods dt{
    height: 52rem;
    line-height: 52rem;
    font-size: 24rem;
    border-left: 1px solid #d9dde1;
    color:rgb(147,153,159);
    background-color: #f3f5f7;
  }
  
  .menugoods .menudetail{
    display: flex;
    position: relative;
    padding:36rem;
    margin-right: 20rem;
    border-bottom: 1px solid rgb(7,17,27,0.1);
  }
  .menudetail img{
    width: 115rem;
    height: 115rem;

  }
  .menudetail .mgoods{
    margin-top: 4rem;
  }
  .mgoods .goodstitle{
    font-size: 28rem;
    color:rgb(7,17,27);
    line-height:20rem;
  }
  .mgoods .metaste{
    margin: 16rem 0;
  }
  .mgoods .metaste,.mgoods .mcomment{
    display: flex;
    font-size: 20rem;
    color:rgb(147,153,159);
    line-height:20rem;
  }
  .mcomment .sale{
    margin-right:24rem;
  }
  
  .mdfoot .price{
    margin-top: 16rem;
    display: flex;
  }
  .mdfoot .mdprice{
    font-size: 28rem;
    color:rgb(240,20,20);
    font-weight:700;
    line-height:48rem;
    margin-right: 16rem;
  }
  .mdprice span{
    font-size:20rem;
    font-weight: normal;
  }
  .mdfoot .mdcost{
    text-decoration: line-through;
    font-size:20rem;
    color:rgb(147,153,159);
    font-weight:700;
    line-height: 48rem;
  }
  .mdcost span{
    font-weight: normal;
  }
  .mgoods .mdnum{
    position: absolute;
    display: flex;
    bottom:36rem;
    right: 36rem;
    height: 48rem;
    line-height:48rem;
  }
  .mdnum .count{
    font-size: 20rem;
    color:rgb(147,153,159);
    line-height:48rem;
    margin:0 24rem;
  }
  .mdnum .desc,.mdnum .add{
    font-size:48rem;
    color: rgb(0,160,220);
    line-height:48rem;
  }
  .goodslist{
    flex: 1
  }
/* 
  .footer{
    display: flex;
    align-items: center;
    position:fixed;
    bottom:0;
    width: 100%;
    height: 96rem;
    background-color: #141d27;
  }
  .footer .hshop{
    position:absolute;
    bottom: 0;
    left: 36rem;
    width:116rem;
    height: 116rem;
    background-color:  #141d27;
    border-radius: 50%;
  }
  .footer .hshop .cart{
    display: flex;
    justify-content:center;
    align-items: center;
    position:absolute;
    bottom: 16rem;
    left: 16rem;
    width: 88rem;
    height: 88rem;
    border-radius: 50%;
    text-align: center;
    background-color:rgb(255, 255,255,0.1);
  }
  .hshop .cart .scart{
    font-size:48rem;
    line-height:48rem;
    height:48rem;
    /* color: rgb(0,0,0,0.1); */
    /* color:rgb(255, 255,255,0.4);
  }
  .footer .hprice{
    font-size:32rem;
    color:rgb(255,255,255,0.4);
    font-weight: 700;
    line-height: 48rem;
    padding-right:24rem;
    margin-left:160rem;
    border-right: 1px solid rgb(255,255,255,0.1);
  }
  .footer .addprice{
    font-size: 32rem;
    color:rgb(255, 255,255,0.4);
    line-height: 48rem;
    margin-left: 24rem;
  }
  .footer .totalprice{
    position:absolute;
    right:0;
    bottom: 0;
    width: 210rem;
    text-align:center;
    font-size: 24rem;
    color:rgb(255,255,255,0.4);
    font-weight: 700;
    line-height: 96rem;
    background-color: #2b333b;
  } */ 
  </style>
